<script>
import { deepClone } from '@/utils'
export default {
  name: 'CTableBox',
  // abstract: true,
  props: {
    index: {
      type: Boolean,
      default: true
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    setting: {
      type: Boolean,
      default: true
    },
    hideFunc: {
      type: Boolean,
      default: false
    },
    hideSetting: {
      type: Boolean,
      default: false
    },
    combine: {
      type: Boolean,
      default: false
    },
    tableConfig: {
      type: Object,
      default: () => ({
        setting: []
      })
    },
    data: {
      type: Array,
      default: undefined
    },
    noDataAutoHeight: {
      type: Boolean,
      default: false
    },
    autoHeight: {
      type: Boolean,
      default: true
    },
    // 与autoHeight重复，在验收执行中打印报告使用
    unfold: {
      type: Boolean,
      default: false
    },
    tableSpanMethod: {
      type: Function,
      default: undefined
    },
    tabIndex: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      loopSum: 0,
      elTabName: undefined
    }
  },
  computed: {
    comTableConfig() {
      return deepClone(this.setTableIndex(this.tableConfig, this.elTabName))
    }
  },
  created() {
    if (this.$parent) {
      this.elTabName = this.getElTabPaneName(this.$parent)
    }
  },
  mounted() {
    // this.$parent.$refs = this.$refs
  },
  methods: {
    getTableBox() {
      return this.$refs.table
    },
    initTableData(v) {
      this.getTableBox().initTableData(v)
    },
    refreshTableHeight() {
      this.getTableBox().refreshTableHeight()
    },
    str2num(str) {
      if (typeof str !== 'string') {
        str = Object.prototype.toString(str)
      }
      let sum = 0
      for (let i = 0; i < str.length; i++) {
        sum += str.codePointAt(i)
      }
      return sum % 100
    },
    getElTabPaneName(parent) {
      if (this.loopSum > 10) {
        return
      }
      this.loopSum += 1
      if (parent.$options && parent.$options.name === 'ElTable') {
        return
      } else if (parent.$options && parent.$options.name === 'ElTabPane') {
        return parent.$props.name
      } else if (parent.$parent) {
        return this.getElTabPaneName(parent.$parent)
      }
    },
    setTableIndex(tabeConfig, elTabName) {
      if (tabeConfig.tabIndex === undefined) {
        if (this.tabIndex !== undefined && this.tabIndex !== null) {
          tabeConfig.tabIndex = typeof this.tabIndex === 'number' ? this.tabIndex : this.str2num(this.tabIndex)
        } else if (elTabName) {
          tabeConfig.tabIndex = this.str2num(elTabName)
        }
      }
      return tabeConfig
    }
  },
  render(h) {
    const tableConfig = this.comTableConfig;
    // propEnum 统一换成c-dict-range-view
    (tableConfig.setting || []).forEach(e => {
      if (e.propEnum && !e.edit && !e.render) {
        const dictTypeCode = e.propEnum.dictTypeCode
        const appCode = e.propEnum.appCode
        const domainCode = e.propEnum.domainCode
        e.render = (h, row) => {
          return h('c-dict-range-view', { props: { dictTypeCode, appCode, domainCode, value: row[e.prop] }})
        }
        delete e.propEnum
      }
    })
    tableConfig.onlySearchBar = true
    if (this.hideFunc) {
      tableConfig.hideFuncBar = this.hideFunc
    }
    const scopedSlots = { default: this.$scopedSlots.default, before: this.$scopedSlots.before }
    const tData = {
      props: {
        ...this.$attrs,
        tableConfig,
        settingAutoRequest: true,
        showIndex: this.index,
        showSelection: this.checkbox,
        showCustomCombine: this.combine,
        showCustomSetting: this.setting,
        tableDefaultExpandAll: true,
        tableSpanMethod: this.tableSpanMethod
      },
      ref: 'table', on: this.$listeners,
      scopedSlots
    }
    if (this.data !== undefined) {
      tData.props.noRequest = true
      tData.props.data = this.data
    }
    const tb = h('table-box', tData)
    if (!this.hideFunc) {
      return tb
    }
    let btnVnode = h('div')
    if (this.$scopedSlots.btn) {
      btnVnode = h('div', { class: 'cus-btn' }, this.$scopedSlots.btn())
    }
    let btnSet = h('div')
    if (this.setting) {
      btnSet = h('el-button', { props: { icon: 'el-icon-setting' }, attrs: { 'gen-pdf': 'gen-pdf-hide' }, on: {
        click: () => {
          this.$refs.table.showTableSetting()
          this.$refs.table.showSetting = true
        }
      }}, '表格设置')
    }
    const btnBox = h('div', { class: 'btn-box', style: {
      height: this.setting ? 'auto' : '0px'
    }}, [btnVnode, btnSet])
    // if (this.$scopedSlots.default) {
    //   tb = h('table-box', tData)
    // }
    return h('div', { class: { 'c-table-box-init': false, 'none-background': this.tableSpanMethod instanceof Function, 'c-table-box': this.autoHeight, 'c-unfold': this.unfold /** || (!this.noDataAutoHeight && (this.data instanceof Array))**/ }}, [btnBox, tb])
  }
}
</script>
<style lang="scss" scoped>
.btn-box{
  display: flex;
  justify-content: space-between;
  height: 33px;
  // margin-bottom: 10px;
  .cus-btn{
    display: flex;
    flex-wrap: wrap;
    /deep/ .container{
      min-height: auto !important;
    }
  }
}
.c-unfold{
  /deep/ .el-table{
    height: auto !important;
    // min-height: 200px;
  }
  /deep/ .el-table__body-wrapper{
    height: auto !important;
    // min-height: 200px;
  }
  /deep/ .el-table{
    height: auto !important;
  }
}
.c-table-box{
  /deep/ .el-table{
    // height: auto !important;
    min-height: 200px;
  }
  /deep/ .el-table__body-wrapper{
    // height: auto !important;
    // min-height: 200px;
  }
  /deep/ .el-table{
    // height: auto !important;
  }
}
.c-table-box-init{
  /deep/ .el-table{
    // height: 400px !important;
    min-height: 200px;
  }
  /deep/ .el-table__body-wrapper{
    // height: 400px !important;
    // min-height: 200px;
  }
}
.none-background{
  & /deep/ .el-table__row{
      background-color: #fff !important;
    }
    & /deep/ .hover-row{
      background-color: #fff !important;
    }
    & /deep/ td{
      background-color: #fff !important;
    }
}
</style>
